<template>
  <div id="screenfull">
    <svg-icon
      name="screenfull"
      @click="click"
    />
  </div>
</template>
<script lang='ts' setup>
import screenfull from 'screenfull'
import { defineComponent, onBeforeUnmount, onMounted, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const sf = screenfull
let isFullscreen = false

const click = () => {
  console.log('sf', sf)
  if (!sf.isEnabled) {
    ElMessage({
      message: 'you browser can not work',
      type: 'warning'
    })
    return false
  }
  sf.toggle()
}
    
const change = () => {
  if (sf.isEnabled) {
    isFullscreen = sf.isFullscreen
  }
}
    
onMounted(() => {
  if (sf.isEnabled) {
    sf.on('change', change)
  }
})

onBeforeUnmount(() => {
  if (sf.isEnabled) {
    sf.off('change', change)
  }
})
</script>
<style lang='scss' scoped>

</style>
